<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM操作集合--慕课网</title>
<script src="domReady.js"></script>
</head>
<body>
    <div id="showMsg"></div>
    <div id="Imgs">
        <img src="img/贺天01.jpg" alt="">
        <img src="img/霍熏.jpg" alt="">
        <img src="img/宓希.jpg" alt="">
        <img src="img/幕星社.jpg" alt="">
        <img src="img/贺天.jpg" alt="">
        <img src="img/08.jpeg" alt="">
    </div>

    <!--isElement() isHTML() isXML() contains()方法演示-->
    <div id="testing">aaa</div><!--我是一个注释[>_<]-->
<script>
    var d = document;
    var msg = d.getElementById("showMsg");
    var Imgs = d.getElementById("imgs");
    var time1 = null, time2 = null;
    myReady(function () {
        msg.innerHTML += "DOM已加载<br>";
        time1 = new Date().getTime();
        msg.innerHTML += "时间戳为" + time1 + "<br>";
    });

    window.onload = function () {
        msg.innerHTML += "onload已加载<br>";
        time2 = new Date().getTime();
        msg.innerHTML += "时间戳为" + time2 + "<br>";
        msg.innerHTML += "DOMready比onload快，时间差为" + (time2 - time1) + "<br>";
    };

    //判断节点类型，isElement isHTML isXML contains四个重要方法的使用
//    function isElement(el) {
//        return !!el && el.nodeType === 1;
//    }
// 但是该方法没有办法避免一个属性为nodeType,且属性值为1的对象，那么我们可以优化一下isElement函数
    function isElement(el) {
        var testDiv = document.createElement("div");
        if(el && el.nodeType === 1){
            if(window.Node && (el instanceof Node)){
                return true;//兼容IE9以及防止该节点来自另外一个文档，我们不能轻易返回false
            }
            try{
                //但是这个效率很差
                testDiv.appendChild(el);
                testDiv.removeChild(el);
            } catch(ex){
                //如果try模块中失败了，那么说明el不是节点，不能被添加到或移除出一个父节点
                return false;
            }
            return true;
        }
        return false;
    }
    var a = {
        nodeType:1
    };
    console.log(isElement(document.getElementById("testing")));//true
    console.log(isElement(document.getElementById("testing").nextSibling));
    console.log(isElement(a));//false
    //false,取得的是div的临近的下一个兄弟节点

    //判断是否是XML文档
    function isHTML(doc) {
        return doc.createElement("p").nodeName === doc.createElement("P").nodeName;
        //使用了功能判断来辨别，属性判断比较容易被攻破
        //HTML节点创建时无论是大写还是小写，最后求得的nodeName都是大写，
        //e.g.
        //document.createElement("div").nodeName;  the result is 'DIV'
    }
    //表达式很长，一个典型的属性判断，来自mootools的slick选择器引擎的源码
    function isXML(document) {
            return (!!document.xmlVersion) || (!!document.xml) ||
                (toString.call(document) == '[object XMLDocument]')
                || (document.nodeType == 9 && document.documentElement.nodeName != 'HTML');
    }
    //或者
    function isXML(doc) {
        return doc.createElement("p").nodeName !== doc.createElement("P").nodeName;
    }
</script>
</body>
</html>
